<template>
  <!-- 作业管理--------------------------------------  p2------------------------------------------------ -->
  <div>
    <!-- 班级 -->
    <div class="class_box">
      <ul>
        <!-- 班级信息 -->
        <li class="class_garde">
          <p>小学五年级(3)班</p>
          <p>班级ID:40938</p>
          <p>进行中</p>
        </li>
        <li class="class_box_heng"></li>
        <!-- 筛选 -->
        <li class="class_style">
          <div>
            <div>
              <p>开始时间</p>
              <p>2020年5月2号 12:45</p>
            </div>
            <div>
              <p>结束时间</p>
              <p>2020年5月2号 12:45</p>
            </div>
          </div>

          <div>
            <div>
              <p>老师</p>
              <p>刘子晨</p>
            </div>
            <div>
              <p>作业类型</p>
              <p>协调</p>
            </div>
          </div>

          <div>
            <div>
              <p>班级人数</p>
              <p>67</p>
            </div>
            <div>
              <p>参加人数</p>
              <p>58</p>
            </div>
          </div>
          <div>
            <div>
              <p>作业内容</p>
              <p>200min/1个</p>
            </div>
          </div>
        </li>
        <li class="class_box_heng"></li>
        <!-- 图表 -->
        <li class="echarts_box">
          <div class="echarts_box_out">
            <div id="main" style="width: 130px; height: 130px"></div>
            <div class="echarts_box_text">77%</div>
          </div>

          <p>总完成率</p>
        </li>
      </ul>
    </div>

    <div class="container-homework">
      <!-- 筛选搜索 -->
      <div class="screen">
        <div class="onerow">
          <el-input
            v-model="search.workId"
            placeholder="请输入学号"
            clearable
          ></el-input>
          <el-input
            v-model="search.name"
            placeholder="请输入学生姓名"
            clearable
          ></el-input>
        </div>
        <div class="tworow">
          <div class="twoleft">
            <el-select v-model="six_value" placeholder="性别">
              <el-option
                v-for="item in search.six"
                :key="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
            <el-select v-model="search.is_over" placeholder="是否完成">
            </el-select>
            <el-select v-model="search.status" placeholder="状态"> </el-select>
            <el-button>搜索</el-button>
          </div>
          <div class="tworight">
            <el-button>重置搜索</el-button>
            <el-button>导出列表</el-button>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <el-divider></el-divider>
      <div class="conList">
        <div class="conHeader">
          <div>当前结果：<span>总击 164 条记录</span></div>
          <el-select v-model="search.custom" placeholder="自定义显示列">
            <!-- <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option> -->
          </el-select>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" width="80"> </el-table-column>
          <el-table-column prop="studentId" label="学号" width="120">
          </el-table-column>
          <el-table-column prop="user_name" label="学生姓名"> </el-table-column>
          <el-table-column prop="six" label="性别"> </el-table-column>
          <el-table-column prop="num" label="数量(个)"> </el-table-column>
          <el-table-column prop="speed" label="速度(个/秒)"> </el-table-column>
          <el-table-column prop="energy" label="能耗(Kcal)"> </el-table-column>
          <el-table-column prop="isFinish" label="是否完成"> </el-table-column>
          <el-table-column prop="result" label="成绩"> </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
              type="primary"
              @click="toEdit(scope.row.id)"
            >操作</el-button> -->
              <el-select
                v-model="operVal"
                @change="change(scope.row.id)"
                placeholder="操作"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homework-sup',
  data() {
    return {
      search: {
        class_num: '', //学号
        user_name: '', //学生姓名
        six: [
          {
            value: '1',
            label: '男'
          },
          {
            value: '2',
            label: '女'
          }
        ], //性别
        is_over: '',//是否完成
        status: ''//状态
      },
      six_value: '',
      // 分页
      total: 1000,
      // 列表数据
      tableData: [{
        id: '1',
        studentId: '2',
        user_name: '陈晨',
        six: '男',
        num: '100',
        speed: '100s',
        energy: '20',
        isFinish: '是',
        result: '66'
      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '详情'
      }],
      // operVal
      operVal: ''
    }
  },
  created() {
    // this.getWorkTable()
  },

  methods: {
    myEcharts() {
      let myChart = this.$echartsd.init(document.getElementById('main'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['直接访问', '邮件营销']
        },
        series: [
          {
            name: '访问来源',
            color: ['#0FDD8D', '#F1F1F1'],
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 70, name: '222' },
              { value: 30, name: '111' },

            ]
          }
        ]

      }
      myChart.setOption(option)
    },
    change(id) {
      if (this.operVal === '2') {
        this.$router.push({ path: `/workPerDet`, query: { id } })
        this.operVal = ''
      } else if (this.operVal === '1') {
        console.log('dddddddddddddddddddddddddddddddddd');
        this.$confirm('此操作将删除该作业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delWorkTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      }
    },
    // 作业管理首页表
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageWorkDetail'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": 0,
          "pageSize": 10,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log('作业管理-作业详情-列表', res);
        this.tableData = res.data.rows
      })
    }
  },
  mounted() {

    this.$nextTick(function () {
      this.myEcharts()
    })

  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table th {
  font-size: 0.1rem;
}
.class_box {
  padding: 0.2604rem 6%;
  background-color: white;
  border-radius: 0.0781rem;
  margin-bottom: 0.1354rem;
  border-bottom: 0.0104rem solid #0fdd8d;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.class_garde {
  > p:first-child {
    color: #525252;
    font-size: 0.125rem;
  }
  > p:nth-of-type(2) {
    color: #888888;
    font-size: 0.0729rem;
    margin: 0.026rem 0;
  }
  > p:nth-of-type(3) {
    font-size: 0.0521rem;
    color: #fff;
    background-color: #0fdd8d;
    padding: 0.0156rem 0.0521rem;
    border-radius: 0.0208rem;
    display: inline-block;
  }
}
.class_style {
  width: 60%;
  display: flex;

  justify-content: space-between;
  flex-wrap: wrap;
  > div {
    margin-right: 10%;
    > div {
      > p:first-child {
        margin-bottom: 0.0521rem;
        color: #888888;
        font-size: 0.0625rem;
      }
      > p:nth-of-type(2) {
        color: #525252;
        font-size: 0.0729rem;
      }
    }
    > div:nth-of-type(1) {
      margin-bottom: 0.1771rem;
    }
  }

  > div:nth-of-type(4) {
    margin-right: 0;
  }
}
.class_box_heng {
  height: 0.8333rem;
  width: 0.0052rem;
  background-color: #f2f2f2;
  display: block;
}
.echarts_box {
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .echarts_box_out {
    position: relative;
    .echarts_box_text {
      position: absolute;
      color: #0fdd8d;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.0729rem;
    }
  }
  > p {
    color: #888888;
    font-size: 0.0625rem;
  }
}

.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选部分
  .screen {
    .onerow {
      display: flex;
      /deep/.el-input--suffix .el-input__inner,
      .el-input--medium {
        background-color: #f7fbfc;
        height: 0.2188rem;
        width: 1.25rem;
        margin-right: 0.1927rem;
        border-radius: 0.0521rem;
      }
    }
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin: 0.1042rem 0.1042rem 0 0;
        }
        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      .tworight {
        margin-top: 0.1042rem;
        .el-button {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #f7fbfc;
          border-radius: 0.0521rem;
        }

        .el-button:nth-child(2) {
          background-color: #0fdd8d;
          color: #fff;
        }
      }
    }
  }
  // 内容列表
  .conList {
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner {
        background-color: #f7fbfc;
        line-height: 0.2188rem;
        width: 0.7396rem;
        border-radius: 0.0521rem;
      }
    }
    .el-table {
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
}
</style>
